<template>
  <div id="app">
    <loading v-model="isLoading"></loading>
    <x-header :left-options="{showBack: false}">维护<a @click="addCommondity" slot="right" class="iconfont">&#xe61c;</a>
    </x-header>
    <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
    <tabbar slot="bottom">
      <tabbar-item :selected=tabbarIsSelected[0] :link="{path:'/'}">
        <!--<tabbar-item :link="{path:'/'}" :selected="route.path === '/'">-->
        <x-icon slot="icon" type="ios-home" class="icon"></x-icon>
        <x-icon slot="icon-active" type="ios-home" class="icon_active"></x-icon>
        <span slot="label">主页</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/stores'}" :selected=tabbarIsSelected[1]>
        <x-icon slot="icon" type="wrench" class="icon"></x-icon>
        <x-icon slot="icon-active" type="settings" class="icon_active"></x-icon>
        <span slot="label">
          <span>维护</span>
        </span>
      </tabbar-item>
      <tabbar-item :selected=tabbarIsSelected[2] :link="{path:'/user'}"><!--badge="9"-->
        <x-icon slot="icon" type="person" class="icon"></x-icon>
        <x-icon slot="icon-active" type="person" class="icon_active"></x-icon>
        <span slot="label">
          <span>个人中心</span>
        </span>
      </tabbar-item>

      <a href="https://beian.miit.gov.cn" target="_blank">
        浙ICP备19032623号-1
      </a>
    </tabbar>
  </div>

</template>

<script>
  import {Tabbar, TabbarItem, TransferDom, XHeader} from 'vux'
  import {mapState} from 'vuex'

  export default {
    name: 'app',
    components: {Tabbar, TabbarItem, TransferDom, XHeader},
    computed: {
      ...mapState({
        isLoading: state => state.vux.isLoading,
        direction: state => state.vux.direction
      }),
    },
    methods: {
      itemclick(e) {
        this.$router.push({path: '/AddCommondity', query: e});
      },
      addCommondity() {
        if (this.$store.state.vux.snsUserInfo.username == 'no') {
          this.$router.push({path: '/'});
        } else {
          this.$router.push({path: '/'});
        }

      }
    },
    data() {
      return {
        tabbarIsSelected: [true, false, false],
        headTitle: '',
        comp_name: ''
      }
    }
  }
</script>


<style lang="less">
  @import '~vux/src/styles/reset.less';

  body {
    background-color: #fbf9fe;
  }

  .icon_active {
    fill: rgb(0, 166, 17);
  }

  .icon {
    fill: rgb(67, 92, 119);
  }

  #app {
    width: 100%;
    height: 100%;
  }

  .vux-pop-out-enter-active,
  .vux-pop-out-leave-active,
  .vux-pop-in-enter-active,
  .vux-pop-in-leave-active {
    will-change: transform;
    transition: all 250ms;
    height: 100%;
    top: 46;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
  }

  .vux-pop-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .vux-pop-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .vux-pop-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .vux-pop-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>
